<template>
  <div class="reg">
    <van-nav-bar
      title="用户注册"
      left-text=""
      right-text="登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="regmian">
      <h4 class="h4">欢迎注册</h4>
      <van-field
        :border="false"
        v-model="uname"
        placeholder="用户名/手机号/邮箱"
        @blur="checkUsername"
        :error-message="error"
      />
      <br />
      <van-field
        v-if="isshow"
        :border="false"
        v-model="upwd"
        placeholder="登录密码"
        type="password"
        @blur="checkPwd"
        :error-message="upwderror"
        @click-right-icon="show"
        right-icon="browsing-history-o"
      />
      <van-field
        v-else
        :border="false"
        v-model="upwd"
        placeholder="登录密码"
        type="text"
        @blur="checkPwd"
        :error-message="upwderror"
        @click-right-icon="show"
        right-icon="browsing-history"
      />
      <br />
      <van-field
        v-if="isshow"
        :border="false"
        v-model="upwd2"
        placeholder="确认登录密码"
        @blur="checkPwd2"
        type="password"
        :error-message="upwd2error"
        @click-right-icon="show"
        right-icon="browsing-history-o"
      />
      <van-field
        v-else
        :border="false"
        v-model="upwd2"
        placeholder="确认登录密码"
        @blur="checkPwd2"
        type="text"
        :error-message="upwd2error"
        @click-right-icon="show"
        right-icon="browsing-history"
      />
      <div class="regbtn">
        <van-button
          round
          type="primary"
          size="large"
          color="#ffa302"
          @click="register"
          :disabled="disabled"
          >注册</van-button
        >
      </div>
    </div>
    <div class="agreement">
      <van-checkbox v-model="checked" icon-size="14px"
        >我已阅读并同意<a style="color: #ffa302"
          >《用户服务协议》</a
        ></van-checkbox
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uname: "",
      upwd: "",
      upwd2: "",
      checked: false,
      error: "",
      upwderror: "",
      upwd2error: "",
      disabled: true,
      isshow: true,
    };
  },
  watch: {
    checked() {
      this.disabled = !this.checked;
    },
  },
  methods: {
    show() {
      this.isshow = !this.isshow;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/login");
    },
    checkUsername() {
      let regular = /^[A-Za-z0-9]{6,15}$/;
      if (regular.test(this.uname)) {
        this.error = "";
        return true;
      } else {
        this.error = "用户名格式不正确(6~15英文/数字)";
        return false;
      }
    },
    checkPwd() {
      let regpwd = /^[a-zA-Z]\w{5,17}$/;
      if (regpwd.test(this.upwd)) {
        this.upwderror = "";
        return true;
      } else {
        this.upwderror = "密码格式不正确(6~18字母开头、数字和下划线)";
        return false;
      }
    },
    checkPwd2() {
      if (this.upwd == this.upwd2) {
        this.upwd2error = "";
        return true;
      } else {
        this.upwd2error = "输入的密码不一致";
        return false;
      }
    },
    register() {
      if (this.checkUsername() && this.checkPwd() && this.checkPwd2()) {
        this.axios
          .post("/users/reg", `username=${this.uname}&password=${this.upwd}`)
          .then((result) => {
            if (result.data.code == 201) {
              this.error = result.data.msg;
            } else {
              this.$toast.success("注册成功");
              this.$router.push("/login");
            }
          });
      } else {
        this.$toast.fail("注册失败");
      }
    },
  },
};
</script>

<style lang="scss">
.reg {
  .van-nav-bar__text {
    color: black;
    font-weight: 500;
    font-size: 16px;
  }
  .van-icon-arrow-left::before {
    color: black;
  }
  .regmian {
    padding-top: 50px;
    margin: 0 auto;
    width: 70%;
  }
  .h4 {
    font-size: 22px;
    font-family: "Courier New", Courier, monospace;
    color: #ffa302;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 600;
  }
  .van-cell {
    border-bottom: 1px solid #d4d6d9;
  }
  .regbtn {
    margin-top: 50px;
  }
  .agreement {
    margin-top: 15px;
    font-size: 10px;
    margin-left: 80px;
  }
}
</style>